<!-- 维修 -->
<template>
  <div>
    <van-search
      v-model="searchVal"
      @search="onSearch"
      placeholder="请输入搜索设备名称"
    />
    <div class="line"></div>
    <van-tabs v-model="active">
      <van-tab title="维修中">
        <div class="facility" v-for="(el, i) of faultList" :key="i">
          <div class="message">
            <div>{{ el.processVariables.itemName }}</div>
            <div>
              编号:
              {{
                el.processVariables
                  ? el.processVariables.device_equipmentNo
                  : "/"
              }}
              &nbsp;&nbsp;&nbsp; 区域:
              {{
                el.processVariables
                  ? el.processVariables.device_areaName
                  : "/"
              }}
            </div>
          </div>
          <van-button icon="weapp-nav" @click="clickAlart(el, 'a')" />
        </div>
      </van-tab>
    </van-tabs>
    <!-- <van-action-sheet
      v-if="active === 0"
      v-model="show"
      :actions="actions1"
      @select="onSelect"
    />
    <van-action-sheet
      v-else-if="active === 1"
      v-model="show"
      :actions="actions2"
      @select="onSelect"
    /> -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>

<script>
// apis
import {
  task,
  GetEquipment,
  /* taskVariables, */
  getAvueForm,
  getDefinition,
  getInstance,
  taskVariables
} from '@/api/index'

import { Tab, Tabs, Search, Divider, Button, ActionSheet } from 'vant'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Divider.name]: Divider,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet
  },
  data () {
    return {
      searchVal: '',
      active: 0,
      show: false,
      actions: [
        // { name: '报修单' },
        { name: '更新' }
      ],
      normalList: [], // 正常
      facilityId: '',
      faultList: [], // 故障
      isLoading: false,
      facilityItem: {}, //  单个设备\
      personId: '',
      btnName: ''
    }
  },
  created () {
    this.getUserInfo()
    this.getTask('repair', '')
  },
  methods: {
    onSearch (val) {
      this.getTask('repair', val)
    },
    GetEquipments ({ name }) {
      const data = {
        page: 1,
        size: 200,
        name: name || null
      }
      this.GetEquipment(data)
    },
    GetEquipment (data) {
      GetEquipment(data).then((res) => {
        this.isLoading = false
        this.normalList = res.list
      })
    },
    getUserInfo () {
      const { token, tenantId, personId } = this.$route.query
      this.token = token
      this.tenantId = tenantId
      this.personId = personId
      window.localStorage.getItem('token', token)
      window.localStorage.getItem('tenantId', tenantId)
      window.localStorage.getItem('personId', personId)
    },
    getTask (processDefinitionKey, name = '') {
      var conditionKeyLike = ['owner']
      var conditionValueLike = [window.localStorage.getItem('personId')]
      if (name) {
        conditionKeyLike.push('device_name')
        conditionValueLike.push(name)
      }
      const data = {
        tenantId: window.localStorage.getItem('tenantId'),
        processCategory: processDefinitionKey,
        page: 1,
        pageSize: 500,
        conditionKeyLike: conditionKeyLike.join(','),
        conditionValueLike: conditionValueLike.join(','),
        withVariables: true,
<<<<<<< HEAD
        taskNameList: '维修,领用申请'
=======
        taskNameList: '维修,领用申请,重新领用'
>>>>>>> 97c721a295c9451418839b041d8a32b88d0f3f8c
      }
      this.task(data)
    },
    task (data) {
      task(data).then((res) => {
        this.isLoading = false
        this.faultList = res.list

        console.log(res)
      })
    },
    async guarantee () {
      const data = {
        processId: this.facilityItem.processDefinitionId,
        taskId: this.facilityItem.taskDefinitionKey,
        tenantId: window.localStorage.getItem('tenantId'),
        type: 'pc'
      }
      const json = await taskVariables(data)
      if (json && json.detail) {
        const obj = JSON.parse(json.detail)
        obj.detail = true
        console.log(obj, json.id, 'llll')
        this.$router.push({
          path: '/serviceContent',
          query: {
            map: obj,
            key: 'repair',
            id: json.id
          }
        })
      }
    },
    async getDefinition () {
      const that = this
      const data1 = {
        definitionKey: 'repair',
        tenantId: window.localStorage.getItem('tenantId'),
        isNewest: true
      }
      const definition = await getDefinition(data1) // 定义流程
      const arr = definition.list[0]
      const data2 = {
        processId: arr.id,
        taskId: that.facilityItem.taskDefinitionKey, // 任务id
        tenantId: window.localStorage.getItem('tenantId'),
        type: 'pc'
      }
      const form = await getAvueForm(data2) // 表单
      const { detail } = form
      this.$router.push({
        path: '/maintainContent',
        query: {
          formData: this.facilityItem.processVariables,
          config: detail,
          taskId: that.facilityItem.id,
          type: '维修'
        }
      })
      if (Array.isArray(form) && form.length === 0) {
        alert('字段为空')
      }
    },
    onSelect (item) {
      const { name } = item
      switch (name) {
        case '报修单':
          this.guarantee()
          break
        case '更新':
          this.getDefinition()
          break
      }
    },
    async getInstance (data) {
      const res = await getInstance(data)
      console.log(res)
    },
    clickAlart (el, type) {
<<<<<<< HEAD
      console.log(el, type)
=======
      this.btnName = el.name
>>>>>>> 97c721a295c9451418839b041d8a32b88d0f3f8c
      if (type === 'b') {
        this.facilityItem = el
        this.facilityId = el.id
      } else {
        // a -> activiti
        this.facilityItem = el
        this.facilityId = el.processVariables.device_id
      }
      this.show = true
    }
  }
}
</script>
<style lang='less' scoped>
.line {
  width: 100%;
  height: 1px;
  border: 1px solid rgba(242, 242, 242, 1);
}
.facility {
  height: 60px;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  .message {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > :last-child {
      font-size: 12px;
    }
  }
}
</style>
